<template>
	<view class="container">
		<sub-navigationbar text="优惠券兑换" btnText=""></sub-navigationbar>
		<view class="text-group">
			<view class="row-group">
				<text class="title">优惠券领取</text>
				<text class="content">在小蓝充商城里购买商品之后，可用商品订单在此兑换优惠券。</text>
			</view>
			<view class="row-group">
				<text class="title">兑换码使用</text>
				<text class="content">在当前页面输入兑换码即可兑换相应优惠券。一个兑换码只能兑换一个优惠券，不可重复使用。</text>
			</view>
			<view class="info">提示：输入兑换码时请使用英文输入法</view>
		</view>
		<view class="input-group">
			<input class="input" maxlength="16" v-model="cdKey" placeholder="请输入16位兑换码" />
		</view>
		<view class="btn-group">
			<button class="btn" type="primary" hover-class="btn-hover" @click="exchange">立即兑换</button>
		</view>
	</view>
</template>

<script>
	import subNavigationbar from '@/components/sub-navigationbar.vue';
	const appData = getApp().globalData;
	export default {
		components: {
			subNavigationbar
		},
		data() {
			return {
				cdKey:'',
				pid:2,
				gIds:null,// 全局id  pid、memberId、openid
				memberId:1
			};
		},
		onLoad() {
			this.gIds = uni.getStorageSync('gIds') || null;
		},
		methods:{
			// 兑换
			exchange() {
				if(!this.cdKey) {
					uni.showToast({
						icon:'none',
						title:'请输入16位兑换码'
					})
					return;
				}else if(this.cdKey.length!==16) {
					uni.showToast({
						icon:'none',
						title:'请输入正确的16位兑换码'
					})
					return;
				}
				uni.showLoading({
					title:'兑换中...'
				})
				uni.request({
					url:appData.baseUrl+appData.api.exchange,
					data:{cdKey:this.cdKey,pid:this.gIds.pid,memberId:this.gIds.memberId},
					method:"GET",
					success:(res)=>{
						uni.hideLoading();
						let toastIcon = 'none';
						if(res.data.normal==1) {
							toastIcon = 'success';
						}
						uni.showToast({
							icon:toastIcon,
							title:res.data.msg
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
.container {
	background-color: #E6F4FF;
	display: flex; 
	flex-direction: column;
	align-items: center;
	padding: 0 34rpx 0 36rpx;
	min-height: 100vh;
}
.text-group {
	margin-top: 50rpx;
}
.row-group {
	display: flex;
	flex-direction: column;
	margin-bottom: 58rpx;
	.title {
		font-size: 36rpx;
		line-height: 50rpx;
		color: #222;
		font-weight: bold;
	}
	.content {
		font-size: 28rpx;
		color: #333;
		line-height: 44rpx;
		margin-top: 12rpx;
	}
}
.info {
	line-height: 48rpx;
	color: $xy-color-default;
	font-size: 28rpx;
}
.input-group {
	width: 100%;
	height: 120rpx;
	background-color: #fff;
	border-radius: 8rpx;
	margin: 60rpx 0 76rpx;
	.input {
		width: 100%;
		height: 100%;
		padding: 0 62rpx;
		font-size: 36rpx;
		box-sizing: border-box;
	}
}

.btn-group {
	.btn {
		font-size: 28rpx;
		line-height: 4;
		background-color: $xy-color-default;
		border-radius: 50rpx;
		padding: 0 230rpx;
		font-weight: bold;
		&.btn-hover {
			color: hsla(0,0%,100%,0.6);
			background-color: $xy-color-primary-hover;
		}
	}
}
</style>
